@extends('layouts.base')

@section('title', '设备详情')

@section('admin-style')
<link rel="stylesheet" href="{{ asset('assets\element-ui\lib\theme-chalk\index.css') }}">
<!-- import Vue before Element -->
<script src="{{ asset('assets\vue\vue.js')}}"></script>

<!-- import JavaScript -->
<script src="{{ asset('assets\element-ui\lib\index.js') }}"></script>
<script src="{{ asset('assets\axios\axios.min.js') }}"></script>

  <style>
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
      display: table;
      content: "";
    }
    .clearfix:after {
      clear: both
    }
    .el-table .warning-row {
      background: #E6A23C;
    }
    .el-table .danger-row {
      background: #F56C6C;
    }
  </style>
@stop

@section('content')
<div class="container-fluid">
	<!-- ============================================================== -->
	<!-- Bread crumb and right sidebar toggle -->
	<!-- ============================================================== -->
	<div class="row page-titles">
	    <div class="col-md-5 align-self-center">
	        <h3 class="text-themecolor">设备详情</h3>
	    </div>
	    <div class="col-md-7 align-self-center">
	        <ol class="breadcrumb">
	            <li class="breadcrumb-item"><a href="javascript:void(0)">首页</a></li>
	            <li class="breadcrumb-item">设备管理</li>
	            <li class="breadcrumb-item">设备列表</li>
	            <li class="breadcrumb-item active">设备详情</li>
	        </ol>
	    </div>
	</div>
	<div class="row">
	    <div class="col-lg-12">
	        <div class="card">
            	<div class="card-header bg-success">
                  <h4 class="m-b-0 text-white">设备详情</h4>
              </div>
              <div class="card-body"></div>
              <div class="card-body"  >
              	<div class="form-body">
                  <el-tabs type="card" v-model="activeName" @tab-click="tabClick" >
                    {{-- 基础信息开始 --}}
                    <el-tab-pane label="基础信息" name="first">
                      <el-card class="box-card" v-loading="loading1">
                        <div slot="header" class="clearfix">
                          <span>基础信息</span>
                          <el-button style="float: right;" v-if="permissions.basicsFormSave" type="primary" @click="submitForm('basicsForm')">保存</el-button>
                        </div>
                        <div class="text item">
                          <el-form style="font-size: 18px" :model="basicsForm" :rules="basicsRules" 
                          ref="basicsForm" label-width="130px" class="demo-ruleForm">  
                            {{-- 1 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">            
                                <el-form-item label="设备名称 : " prop="name">
                                  <el-input :disabled="!permissions.nameEdit" v-model="basicsForm.name"></el-input>
                                </el-form-item>                                
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="设备编号(IMEI) : " prop="imei">
                                    <el-input :disabled="!permissions.imeiEdit" v-model="basicsForm.imei"></el-input>
                                  </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="sim : " prop="sim_no">
                                    <el-input :disabled="!permissions.simEdit" v-model="basicsForm.sim_no"></el-input>
                                  </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 2 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="主板类型 : ">
                                  <el-select :disabled="!permissions.mainboradEdit" v-model="basicsForm.mainborad_id" placeholder="选择货机类型">
                                    <el-option 
                                      v-for="item in mainborads"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id"></el-option>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="货机类型 : " >
                                  <el-select :disabled="!permissions.setCate" v-model="basicsForm.cate" placeholder="选择货机类型">
                                    <el-option label="普通" value="1"></el-option>
                                    <el-option label="大屏" value="2"></el-option>
                                  </el-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                  <el-form-item label="到期时间 : " prop="expire_time">
                                    <el-date-picker
                                        :disabled="!permissions.expireEdit"
                                        v-model="basicsForm.expire_time"
                                        type="date"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期"
                                        :picker-options="pickerOptions0">
                                      </el-date-picker>
                                  </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 3 --}}
                            <el-row :gutter="20">
                              <el-col :span="16">
                                <el-form-item label="备注 : " prop="rank">
                                  <el-input :disabled="!permissions.rankEdit" type="textarea" :autosize="{ minRows: 5, maxRows: 20}"  style="width: 56%;" v-model="basicsForm.rank"></el-input>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="所属商户 : " >
                                  <a href="javascript:;" @click="changeMerchant" v-if="merchant_info != ''"><el-tag v-if="merchant_info" style="font-size: 18px">@{{ merchant_info.name }}</el-tag>
                                    <el-tag v-if="!merchant_info" style="font-size: 18px">@{{ '请绑定商户' }}</el-tag></a>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            {{-- 1 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="状态 : ">
                                  <el-tag style="font-size: 18px">@{{online()}}</el-tag>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="信号 : " >
                                  <el-tag v-if="basicsForm.signal" style="font-size: 18px">@{{basicsForm.signal}}</el-tag>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="版本号 : " >
                                  <el-tag v-if="basicsForm.signal" style="font-size: 18px">@{{basicsForm.version}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 2 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="温度状态 : " >
                                  <el-tag style="font-size: 18px">@{{ tem_state()}}</el-tag>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item label="温度值 : " >
                                  <el-tag style="font-size: 18px">@{{basicsForm.tem}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            {{-- 3 --}}
                            <el-row :gutter="20">
                              <el-col :span="8">
                                <el-form-item label="灯光状态 : " >
                                  <el-tag style="font-size: 18px">@{{led_state()}}</el-tag>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-divider></el-divider>
                            <el-row :gutter="20">
                              <el-col :span="3">
                                <el-form-item label="二维码 : ">
                                  <el-image 
                                    style="width: 100px; height: 100px"
                                    :src="qrcode" 
                                    :preview-src-list="qrcodes">
                                  </el-image>
                                </el-form-item>
                              </el-col>
                              <el-col :span="8">
                                <el-form-item>
                                <form method="POST" action="{{ route('admin.machines.downloadQrcode') }}">
                                    {{ csrf_field() }}
                                    <input type="hidden" name="machine_id" value="{{ $id }}">
                                    <button type="submit" class="btn btn-info btn-xs">下载</button>
                                </form>
                                </el-form-item>
                              </el-col>
                            </el-row>
                          </el-form>                          
                        </div>
                      </el-card>
                    </el-tab-pane>
                    {{-- 基础信息结束 --}}
                    {{-- 配置信息开始 --}}
                    <el-tab-pane label="配置信息" name="second">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span>配置信息</span>                          
                          <el-button style="float: right;" type="primary" 
                          :disabled="!permissions.configEdit" @click="submitForm('configForm')">保存</el-button>
                        </div>
                        <div class="text item">                          
                          <el-form style="font-size: 18px" :model="configForm" :rules="configRules" 
                          ref="configForm" label-width="130px" class="demo-ruleForm">
                            <div class="boder-rect bgbr-1">
                              <span class="rec-title">温度控制</span>
                            <el-row type="flex">                              
                              <el-col :span="6">
                                <el-form-item
                                label=" " 
                                prop="temstate">
                                  <el-radio-group :disabled="!permissions.configEdit" v-model="configForm.temstate">
                                    <el-radio-button label="1">开启</el-radio-button>
                                    <el-radio-button label="0">关闭</el-radio-button>
                                  </el-radio-group>
                                </el-form-item> 
                              </el-col>
                              <el-col :span="6">
                                <el-form-item
                                label=" " 
                                prop="temkey">
                                  <el-radio-group :disabled="!permissions.configEdit" v-model="configForm.temkey">
                                    <el-radio-button label="cold">制冷</el-radio-button>
                                    <el-radio-button label="heat">制热</el-radio-button>
                                  </el-radio-group>
                                </el-form-item>
                              </el-col>
                              <el-col :span="11">
                                <el-form-item label="温度值" prop="temvalue">
                                  <el-input-number :disabled="!permissions.configEdit" :step="1" step-strictly :min="0" :max="99" v-model="configForm.temvalue" style="width: 56%;"></el-input-number>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-row type="flex">
                              <el-col :span="6">
                                <el-form-item label="定时开始时间" prop="temstart">
                                  <el-time-select
                                  :disabled="!permissions.configEdit"
                                  placeholder="起始时间"
                                  v-model="configForm.temstart"
                                  :picker-options="{
                                    start: '00:00',
                                    step: '00:05',
                                    end: '23:59'
                                  }">
                                  </el-time-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="11">
                                <el-form-item label="定时结束时间" prop="temend">
                                  <el-time-select
                                  :disabled="!permissions.configEdit"
                                  style="width: 56%;"
                                  placeholder="结束时间"
                                  v-model="configForm.temend"
                                  :picker-options="{
                                    start: '00:00',
                                    step: '00:05',
                                    end: '23:59'
                                  }">
                                  </el-time-select>
                                </el-form-item>
                              </el-col>
                            </el-row>
                            <el-alert
                              title="温度如果定时开始时间与定时结束时间相同,则设备认为常开"
                              type="error"
                              :closable="false">
                            </el-alert><br>
                            </div>
                            <el-divider></el-divider>
                            <div class="boder-rect bgbr-1">
                              <span class="rec-title">灯光控制</span>
                            <el-row type="flex">
                              <el-col :span="6">
                                <el-form-item
                                label=" " 
                                prop="ledstate">
                                  <el-radio-group :disabled="!permissions.configEdit" v-model="configForm.ledstate">
                                    <el-radio-button label="1">开启</el-radio-button>
                                    <el-radio-button label="0">关闭</el-radio-button>
                                  </el-radio-group>
                                </el-form-item>
                              </el-col>  
                            </el-row>
                            <el-row>                       
                              <el-col :span="6">
                                <el-form-item label="定时开始时间" prop="ledstart">
                                  <el-time-select
                                  :disabled="!permissions.configEdit"
                                  placeholder="起始时间"
                                  v-model="configForm.ledstart"
                                  :picker-options="{
                                    start: '00:00',
                                    step: '00:05',
                                    end: '23:59'
                                  }">
                                  </el-time-select>
                                </el-form-item>
                              </el-col>
                              <el-col :span="11">                              
                                <el-form-item label="定时结束时间" prop="ledend">
                                  <el-time-select
                                  :disabled="!permissions.configEdit"  
                                  style="width: 56%;"
                                  placeholder="结束时间"
                                  v-model="configForm.ledend"
                                  :picker-options="{
                                    start: '00:00',
                                    step: '00:05',
                                    end: '23:59'
                                  }">
                                  </el-time-select>
                                </el-form-item>
                              </el-col>
                            </el-row>   
                            <el-alert
                              title="灯光如果定时开始时间与定时结束时间相同,则设备认为常开"
                              type="error"
                              :closable="false">
                            </el-alert><br>                       
                            </div>
                          </el-form>
                        </div>
                      </el-card>
                    </el-tab-pane>
                    {{-- 配置信息 --}}
                    {{-- 货道信息开始 --}}
                    <el-tab-pane label="货道信息" name="third">
                      <el-card class="box-card" v-loading="freightLoading">
                        <div slot="header" class="clearfix">
                          <span>货道总数 : </span><span>@{{freightForm.length}}</span>                      
                          <el-button v-if="permissions.editAll" style="float: right;"  type="primary" @click="changeFreight">批量编辑</el-button>
                          <el-button v-if="permissions.outAll" style="float: right; margin-right: 10px" 
                          @click="outAll" type="primary">一键出货</el-button>
                          <el-button v-if="permissions.copyFreight" style="float: right; margin-right: 20px" @click="getMchines" type="primary">复制货道</el-button>
                          <el-button style="float: right; margin-right: 10px" type="primary" @click="freightQrcode">生成二维码</el-button>
                          <el-button v-if="permissions.LoadingGoods" style="float: right; margin-right: 10px" 
                          @click="addStock" type="primary">一键补货</el-button>
                          <el-radio-group @change="screen" style="float: right; margin-right: 10px" v-model="screenFreight" >
                            <el-radio-button label="all" >全部</el-radio-button>
                            <el-radio-button label="open" >启用</el-radio-button>
                            <el-radio-button label="defect" >缺货货道</el-radio-button>
                          </el-radio-group>
                          <el-button style="float: right; margin-right: 10px" 
                          @click="tabClick" type="primary">刷新</el-button>
                          <el-button style="float: right; margin-right: 10px" 
                          v-if="permissions.deleteOrder"
                          @click="deleteOrder" type="danger">清除订单</el-button>
                          <el-button style="float: right; margin-right: 10px" 
                          v-if="permissions.copyFreightDemo"
                          @click="copyDemoFreight" type="primary">复制货道模版</el-button>                          
                        </div>
                        <div class="text item">
                          <el-table
                              v-loading="loading"
                              :data="freightForm"
                              border
                              style="width: 100%"
                              :row-class-name="tableRowClassName">
                              <el-table-column
                                prop="No"
                                label="货道编号"
                                width="50">
                              </el-table-column>
                              <el-table-column
                                prop="goods"
                                label="商品名称">
                                <template slot-scope="scope">
                                  <a href="javascript:;" @click="bindGoods(scope.row)"><span v-if="scope.row.goods_id">@{{scope.row.goods.goods_name}}</span></a>
                                  <el-button type="primary" :disabled="!permissions.bindGoods" @click="bindGoods(scope.row)" v-if="!scope.row.goods_id">绑定商品</el-button>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="goods"
                                label="商品图片">
                                <template slot-scope="scope">
                                  <el-image
                                    style="width: 50px; height: 50px"
                                    :src="scope.row.goods.goods_image"
                                    v-if="scope.row.goods_id"></el-image>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="capacity"
                                label="容量"
                                width="120">
                                <template slot-scope="scope">
                                  <el-input-number :disabled="!permissions.setCapacity" @change="freightUpdateData(scope.row)" style="width: 90%;" controls-position="right" :step="1" step-strictly :min="0" v-model="scope.row.capacity"></el-input-number>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="stock"
                                label="库存"
                                width="120">
                                <template slot-scope="scope">
                                  <el-input-number :disabled="!permissions.setStock" @change="freightUpdateData(scope.row)" style="width: 90%;" controls-position="right" :step="1" step-strictly :min="0" v-model="scope.row.stock"></el-input-number>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="stock_warning"
                                label="库存预警"
                                width="120">
                                <template slot-scope="scope">
                                  <el-input-number :disabled="!permissions.setStockWarning" @change="freightUpdateData(scope.row)" style="width: 90%;" controls-position="right" :step="1" step-strictly :min="0" v-model="scope.row.stock_warning"></el-input-number>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="price"
                                label="价格"
                                width="120">
                                <template slot-scope="scope">
                                  <el-input-number :disabled="!permissions.setPrice" @change="freightUpdateData(scope.row)" :step="0.01" :precision="2" step-strictly :min="0.00" :max="2000" style="width: 100%;" controls-position="right"  v-model="scope.row.price"></el-input-number>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="state"
                                label="状态">
                                <template slot-scope="scope">
                                  <el-select :disabled="!permissions.setState" @change="freightUpdateData(scope.row)" v-model="scope.row.state" >
                                    <el-option 
                                    v-for="item1 in freightState" 
                                    :key="item1.index"
                                    :label="item1.label" 
                                    :value="item1.index"
                                    ></el-option>
                                  </el-select>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="type"
                                label="货道类型"
                                width="120">
                                <template slot-scope="scope">
                                  <el-select :disabled="!permissions.FreightType" @change="freightUpdateData(scope.row)" v-model="scope.row.type" placeholder="请选择电机类型">
                                    <el-option v-for="item in freightLockType" :key="item.value" :label="item.label" :value="item.value"></el-option>
                                  </el-select>
                                </template>
                              </el-table-column>
                              <el-table-column
                                prop="updated_at"
                                label="编辑时间"
                                width="180">
                              </el-table-column>
                              <el-table-column
                                label="操作"
                                width="100"
                                >
                                <template slot-scope="scope">                                  
                                  <el-button
                                    type="primary"
                                    size="mini"
                                    :disabled="!permissions.freightOpen"
                                    @click="handleOpen(scope.$index, scope.row)">出货</el-button>
                                </template>
                              </el-table-column>
                          </el-table>
                        </div>
                      </el-card>
                    </el-tab-pane>
                    {{-- 货道信息结束 --}}
                    <el-tab-pane label="订单信息" name="fourth">
                      <el-card class="box-card">
                        <div slot="header" class="clearfix">
                          <span>订单信息</span>
                          {{-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> --}}
                        </div>
                        <div class="text item">
                          <orders ref="orderlist" :id="machineId" :url="order_url"></orders>
                        </div>
                      </el-card>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
            <el-dialog title="复制货道" :visible.sync="dialogFormVisible" width="30%" center>
              <el-form :model="machineForm">
                <el-form-item label="设备" >
                  <el-select v-model="machineForm.machine_id" placeholder="请选择设备">
                    <el-option v-for="(value1, key1) in machineLists" :key="key1" :label="value1.name" :value="value1.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="VisibleCopyFreight">取 消</el-button>
                <el-button type="primary" @click="copyFreight">确 定</el-button>
              </div>
            </el-dialog>
            <el-dialog title="复制货道模板" :visible.sync="dialogFreightFormVisible" width="30%" center>
              <el-form :model="freightForms">
                <el-form-item label="设备" >
                  <el-select v-model="freightForms.freight_id" placeholder="请选择设备">
                    <el-option v-for="(value2, key2) in freightList" :key="key2" :label="value2.name" :value="value2.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="VisibleCopyFreightDemo">取 消</el-button>
                <el-button type="primary" @click="copyFreightDemo">确 定</el-button>
              </div>
            </el-dialog>
            {{-- 批量编辑 --}}
              <el-dialog
                title="提示"
                :visible.sync="freightDialogVisible"
                width="30%"
                :before-close="handleClose">
                <el-form ref="freightWayForm" :rules="freightWayRules" :model="freightWayForm" label-width="80px">
                  <el-form-item label="货道编号">
                    <el-input-number :step="1" step-strictly :min="0" controls-position="right" v-model="freightWayForm.start" placeholder="开始" style="width: 27%;"></el-input-number>--<el-input-number :step="1" step-strictly :min="0" :max="{{ get_default_freight() }}" controls-position="right" placeholder="结束" v-model="freightWayForm.end" style="width: 27%;"></el-input-number>
                  </el-form-item>
                  <el-form-item>
                    <el-input
                      style="width: 56%;"
                      type="textarea"
                      :rows="2"
                      placeholder="请输入单个货道号,使用/隔开,例如1/2/3/4"
                      v-model="freightWayForm.singles">
                    </el-input>
                  </el-form-item>
                  <el-form-item label="容量">
                    <el-input-number v-if="freightWayForm.edit_capacity" :disabled="!permissions.setCapacity" :step="1" step-strictly :min="1" v-model="freightWayForm.capacity" style="width: 56%;"></el-input-number>
                    <el-checkbox v-model="freightWayForm.edit_capacity"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="库存">
                    <el-input-number v-if="freightWayForm.edit_stock" :disabled="!permissions.setStock" :step="1" step-strictly :min="1" v-model="freightWayForm.stock" style="width: 56%;"></el-input-number>
                    <el-checkbox v-model="freightWayForm.edit_stock"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="库存预警">
                    <el-input-number v-if="freightWayForm.edit_stock_warning" :disabled="!permissions.setStockWarning" :step="1" step-strictly :min="1" v-model="freightWayForm.stock_warning" style="width: 56%;"></el-input-number>
                    <el-checkbox v-model="freightWayForm.edit_stock_warning"></el-checkbox>
                  </el-form-item>
                  <el-form-item label="价格">
                    <el-input-number v-if="freightWayForm.edit_price" :disabled="!permissions.setPrice" :step="0.01" :precision="2" step-strictly :min="0.00" :max="2000" v-model="freightWayForm.price" style="width: 56%;"></el-input-number>
                    <el-checkbox v-model="freightWayForm.edit_price"></el-checkbox>
                  </el-form-item>
                <el-form-item label="状态">
                  <el-select v-if="freightWayForm.edit_state" :disabled="!permissions.setState" v-model="freightWayForm.state" placeholder="选择状态">
                    <el-option label="未启用" value="0"></el-option>
                    <el-option label="正常" value="1"></el-option>
                    <el-option label="开路异常" value="2"></el-option>
                    <el-option label="短路异常" value="3"></el-option>
                  </el-select>
                  <el-checkbox v-model="freightWayForm.edit_state"></el-checkbox>
                </el-form-item>
                <el-form-item label="电机类型">
                  <el-select v-if="freightWayForm.edit_type" :disabled="!permissions.FreightType" v-model="freightWayForm.type" placeholder="请选择电机类型">
                    <el-option label="三线电机" value="1"></el-option>
                    <el-option label="电磁锁" value="2"></el-option>
                    <el-option label="二线电机" value="3"></el-option>
                    <el-option label="带反馈电磁锁" value="4"></el-option>
                    <el-option label="履带" value="5"></el-option>
                    <el-option label="蛇形货道" value="6"></el-option>
                    <el-option label="特殊" value="7"></el-option>
                  </el-select>
                  <el-checkbox v-model="freightWayForm.edit_type"></el-checkbox>
                </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="handleClose">取 消</el-button>
                  <el-button type="primary" @click="changeFreightSubmit">确 定</el-button>
                </span>
              </el-dialog>
              {{-- 商品列表 --}}
              <el-dialog
                title="商品列表"
                :visible.sync="dialogGoodsVisible"
                width="50%"
                center>
                  <el-form>
                    <el-form-item label="筛选:">
                      <el-input style="width: 30%;" @change="searchGoods" placeholder="商品名称" v-model="search_goods_name"></el-input>
                    </el-form-item>
                  </el-form>  
                  <div class="row p-t-20">
                      <el-table
                      :data="goodsData"
                      border
                      style="width: 100%">
                      <el-table-column
                        prop="goods_image"
                        label="商品图片"
                        >
                        <template slot-scope="scope">
                          <el-image
                            style="width: 50px; height: 50px"
                            :src="scope.row.goods_image"
                            ></el-image>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="goods_name"
                        label="商品名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="goodsType"
                        label="商品分类"
                        >
                        <template slot-scope="scope">
                          <span v-if="scope.row.goodsType">@{{scope.row.goodsType.goods_name}}</span>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="created_at"
                        label="创建时间"
                        width="180">
                      </el-table-column>
                      <el-table-column
                        prop="actionButton"
                        label="操作"
                        >
                        <template slot-scope="scope">
                          <el-button
                            type="primary"
                            size="mini"
                            @click="submitBindGoods(scope.$index, scope.row)">添加</el-button>
                        </template>
                      </el-table-column>
                    </el-table> 
                  </div>
                  <div class="card-body text-center">
                    <el-pagination
                      background
                      :page-size="goods_page_size"
                      layout="prev, pager, next"
                      :total="goods_total"
                      :current-page.sync="goods_current_page"
                      prev-text="上一页"
                      next-text="下一页"
                      @current-change="handleGoodsCurrentChange">
                    </el-pagination>
                  </div>  
              </el-dialog>
              {{-- 修改商户 --}}
              <el-dialog :before-close="handleMerchantClose" title="绑定商户" :visible.sync="changeMerchantDialog">
                <el-form ref="merchantForm" :model="merchantForm" label-width="80px">
                  <el-form-item label="选择商户" >
                    <el-select v-model="merchantForm.merchant_id" filterable placeholder="请选择商户">
                      <el-option value="0" label="平台"></el-option>
                      <el-option 
                      v-for="item in merchant_all"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"></el-option>
                    </el-select>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="handleMerchantClose">取 消</el-button>
                  <el-button type="primary" @click="changeMerchantPost">确 定</el-button>
                </div>
              </el-dialog>
	    </div>
	</div>
</div>
@stop

@section('admin-js')
<script type="text/javascript" src="{{ asset('assets/vue/components/machines/orders.js') }}"></script>
<script type="text/javascript">
    Vue.prototype.$axios = axios;
    Vue.prototype.$dcopy = function($arr){
        return JSON.parse(JSON.stringify($arr));
    }
</script>

<script>    
    //vue
    var my_vue = new Vue({
          el: '#app',
          data: function(){
            return {                
                search_goods_name:'',
                order_url:"{{ route('admin.machines.orders') }}",
                permissions:{
                  mainboradEdit: "{{ auth('admin')->user()->can('admin.machines.mainboradEdit') }}",
                  nameEdit: '{{ auth('admin')->user()->can('admin.machines.nameEdit') }}',
                  imeiEdit: '{{ auth('admin')->user()->can('admin.machines.imeiEdit') }}',
                  simEdit: '{{ auth('admin')->user()->can('admin.machines.simEdit') }}',
                  expireEdit: '{{ auth('admin')->user()->can('admin.machines.expireEdit') }}',
                  rankEdit: '{{ auth('admin')->user()->can('admin.machines.rankEdit') }}',
                  configEdit: '{{ auth('admin')->user()->can('admin.machines.configEdit') }}',
                  LoadingGoods: '{{ auth('admin')->user()->can('admin.machines.LoadingGoods') }}',
                  copyFreight: '{{ auth('admin')->user()->can('admin.machines.copyFreight') }}',
                  freightOpen: '{{ auth('admin')->user()->can('admin.machines.freightOpen') }}',
                  FreightType: '{{ auth('admin')->user()->can('admin.machines.FreightType') }}',
                  bindGoods: '{{ auth('admin')->user()->can('admin.machines.bindGoods') }}',
                  setCapacity: '{{ auth('admin')->user()->can('admin.machines.setCapacity') }}',
                  setStock: '{{ auth('admin')->user()->can('admin.machines.setStock') }}',
                  setStockWarning: '{{ auth('admin')->user()->can('admin.machines.setStockWarning') }}',
                  setPrice: '{{ auth('admin')->user()->can('admin.machiens.setPrice') }}',
                  setState: '{{ auth('admin')->user()->can('admin.machines.setState') }}',
                  setCate: '{{ auth('admin')->user()->can('admin.machines.cateEdit') }}',
                  setMerchant: '{{auth('admin')->user()->can('admin.machines.changeMerchant') }}',
                  outAll: '{{auth('admin')->user()->can('admin.machines.outAll') }}',
                  editAll: '{{auth('admin')->user()->can('admin.machines.editAll') }}',
                  basicsFormSave: '{{auth('admin')->user()->can('admin.machines.basicsFormSave') }}',
                  deleteOrder : '{{ auth('admin')->user()->can('admin.machines.deleteOrder') }}',
                  copyFreightDemo : '{{ auth('admin')->user()->can('admin.machines.copyFreightDemo') }}',
                  
                },
                freightLoading:true,
                loading1:true,
                qrcode:"data:image/png;base64," + "{!! base64_encode($qr) !!}",
                qrcodes:[
                  "data:image/png;base64," + "{!! base64_encode($qr) !!}"
                ],
                pickerOptions0: {
                  disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;//如果没有后面的-8.64e7就是不可以选择今天的
                  }
                }, 
                machineLists:[],
                machineForm:{
                  machine_id:'',
                },
                freightForms:{
                  freight_id:'',
                },
                freightList:[],
                dialogFreightFormVisible:false,
                freightid:'',
                dialogGoodsVisible:false,
                freightDialogVisible:false,
                dialogFormVisible: false,
                screenFreight:'open',
                loading: true,
                activeName:'first',
                machineId: "{{ $id }}",                
                mainborads:[],
                freight_way_demo:'',
                //基础信息
                basicsForm:{
                  name:'',
                  imei:'',
                  sim_no:'',
                  cate:'',
                  expire_time:'',
                  rank:' ',
                  mainborad_id:'',
                },
                basicsRules:{
                  imei: [
                    { required: true, message: '请输入imei号', trigger: 'blur' }
                  ],
                  expire_time: [
                    { required: true, message: '请选择过期时间', trigger: 'change;' },
                  ]
                },
                //配置信息
                configForm:{
                  temkey:'cold',
                  temstate:'1',
                  temtitle:'',
                  temvalue:'',
                  temstart:'00:00',
                  temend:'00:00',
                  ledkey:'',
                  ledstate:'1',
                  ledtitle:'',
                  ledstart:'00:00',
                  ledend:'00:00',

                },
                configRules:{

                },
                freightForm:[],
                freightState:[
                  {index: 0,label:'未启用'},
                  {index: 1, label:'正常'},
                  {index: 2, label:'开路故障'},
                  {index: 3, label:'短路故障'},
                  {index: 4, label:'检测故障'},
                  {index: 5, label:'电路故障'}, 
                  {index: 6, label:'超时故障'},
                  {index: 7, label:'货道正忙'},                
                ],
                freightLockType:[
                  {
                      label:'三线电机',
                      value:1,
                  },
                  {
                      label:'电磁锁',
                      value:2,
                  },
                  {
                      label:'二线电机',
                      value:3,
                  },
                  {
                      label:'带反馈电磁锁',
                      value:4,
                  },
                  {
                      label:'履带',
                      value:5,
                  },
                  {
                      label:'蛇形货道',
                      value:6,
                  },
                  {
                      label:'特殊',
                      value:7,
                  }
                ],
                machineState:[
                  {
                      label:'未启用',
                      value:0,
                  },
                  {
                      label:'上线',
                      value:1,
                  },
                  {
                      label:'离线',
                      value:2,
                  },
                ],
                temState:[
                  {
                    label:"关闭",
                    value:0,
                  },
                  {
                    label:"制冷",
                    value:1,
                  },
                  {
                    label:"制热",
                    value:2,
                  }
                ],
                ledState:[
                  {
                    label:"关闭",
                    value:0,
                  },
                  {
                    label:"开启",
                    value:1,
                  }
                ],                
                freightWayForm: {
                  start:'',
                  end:'',
                  singles:'',
                  capacity: '',
                  type: '1',
                  state: '0',
                  stock:'1',
                  stock_warning:'1',
                  price:'0.00',
                  machine_id: '{{ $id }}',
                  edit_capacity: false,
                  edit_type: false,
                  edit_state: false,
                  edit_stock: false,
                  edit_stock_warning:false,
                  edit_price: false,
                },
                freightWayPost: {
                  start:'',
                  end:'',
                  singles:'',
                  machine_id: '{{ $id }}'
                },
                freightWayRules:{
                  start: [
                    {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                  ],
                  end: [
                    {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                  ],
                  singles: [
                    {required: true, message: '请输入货道号', 'trigger': 'blur'},                      
                  ]
                },
                goodsData:[],                
                goods_total: 0,
                goods_current_page:1,
                goods_page_size:0,
                bindFormData:{
                  freight_id:'',
                  goods_id:'',
                },
                merchant_info:'',
                merchant_all:[],
                merchantForm:{
                  merchant_id: '',
                  machine_id:'{{ $id }}',
                },
                changeMerchantDialog:false,
             } 
          },
          mounted:function(){
            this.$nextTick(() => {
                this.init();
                this.getMainborad();
            })            
          },
          created:function(){
            
          },
          methods: {  
            getMainborad(){
              var that = this;
              axios.get("{{ route('admin.mainborad.lists') }}").
              then(res => {
                that.mainborads = res.data.data;
              }); 
            },
            handleMerchantClose(){
              if(this.merchant_info){
                this.merchantForm.merchant_id = this.merchant_info.id
              }
              this.changeMerchantDialog = false;
            },
            changeMerchant(){
              if(this.permissions.setMerchant){
                this.changeMerchantDialog = true;
                axios.get("{{ route('admin.merchants.lists') }}").
                then(res => {
                  this.merchant_all = res.data.data;
                });
              }
              
            },
            changeMerchantPost(){
              var that = this;
              axios.post("{{ route('admin.machines.changeMerchant') }}", that.merchantForm)
              .then(res => {
                that.changeMerchantDialog = false;
                that.$message.success('绑定成功');
                that.init();
              });
            },
            online(){
              var that = this;
              var state = ['未启用','上线','离线'];
              return state[that.basicsForm.online];
            },  
            tem_state(){
              var that = this;
              var state = ["关闭","制冷","制热"];
              return state[that.basicsForm.tem_state];
            },
            led_state(){
              var that = this;
              var state = ["关闭","开启"]
              return state[that.basicsForm.led_state];
            },     
            init:function(){
              var that = this;              
              axios.get("{{ route('admin.machines.info') }}", {
                params:{
                  machine_id: that.machineId,
                }
              }).then(res => {
                data = res.data.data;     
                that.basicsForm = data;
                that.basicsForm.cate = data.cate.toString();
                that.basicsForm.mainborad_id = data.mainborad.id;
                that.freight_way_demo = data.freight_way_demo;
                that.configForm = data.config_data;
                that.freightForm.lenght = 0;
                that.merchant_info = data.merchant;
                if(that.merchant_info){
                  that.merchantForm.merchant_id = data.merchant.id;
                }
                if(res.data.msg='success'){
                  that.loading1 = false;
                  that.loading = false;
                }
              });                          
            },
            submitForm(formName){
              var that = this;
              switch(formName) {
                case 'basicsForm':
                  that.$refs[formName].validate((valid) => {
                    if (valid) {                      
                      that.postBasics();                      
                    } else {
                      return false;
                    }
                  });
                  break;
                case 'configForm':
                  that.postConfig();
                  break;
              }                    
              
            },
            postBasics(){
              var that = this;
              let postData = {
                name: that.basicsForm.name,
                imei: that.basicsForm.imei,
                sim_no: that.basicsForm.sim_no,
                expire_time: that.basicsForm.expire_time,
                rank: that.basicsForm.rank,
                machine_id: that.basicsForm.id,
                cate: that.basicsForm.cate,
                mainborad_id : that.basicsForm.mainborad_id,
              };
              axios.put("{{ route('admin.machines.update', $id) }}",
                postData
                ).then(res => {
                  var data = res.data;
                  if(data.msg = "success"){
                    that.$message.success('编辑成功');
                    that.init();
                    that.basicsEdit = false;
                  }else{
                    that.$message.error('编辑失败');
                    that.init();
                    that.basicsEdit = false;
                  }
                });
            },
            postConfig(){
              var that = this;
              var config = [];
              let tem = {
                  title:'温度',
                  key: that.configForm.temkey,
                  value: that.configForm.temvalue,
                  state: that.configForm.temstate,
                  start: that.configForm.temstart,
                  end: that.configForm.temend,
                  id: that.configForm.temid,
              };
              let led = {
                  title:'照明',
                  key: 'led',
                  value: '',
                  state: that.configForm.ledstate,
                  start: that.configForm.ledstart,
                  end: that.configForm.ledend,
                  id: that.configForm.ledid,
              };
              config.push(tem,led);
              axios.put("{{ route('admin.machines.configUpdate') }}",{config:config,machine_id:'{{ $id }}'})
              .then(res => {
                var data = res.data;
                if(data.msg = "success"){
                  that.$message.success('编辑成功');
                  that.init();
                }else{
                  that.$message.error('编辑失败');
                  that.init();
                }
              });
            }, 
            tabClick(){
              if(this.activeName == 'second'){
                
              }else if(this.activeName == "third"){                
                this.getFreight(1);
              }else if(this.activeName == 'fourth'){
                this.$refs.orderlist.machine_id++;
              }
            },
            tableRowClassName({row, rowIndex}) {
              if (row.stock <= row.stock_warning && row.state != 0) {
                return 'warning-row';
              } 
              if (row.state > 1) {
                return 'danger-row';
              }
              return '';
            },
            screen(value){
              var that = this;
              switch(value) {
                case 'all':
                  that.getFreight();
                  break;
                case 'open':
                  that.getFreight(1);
                  break;
                case 'defect':
                  that.getFreight('defect');
                  break;
              }      
            },
            getFreight(state = null){
              var that = this;
              that.freightLoading = true;
              axios.get("{{ route('admin.machines.freight') }}",{
                params:{
                  state:state,
                  machine_id: "{{ $id }}"
                }
              }).then(res => {
                var data = res.data;
                that.freightForm.length = 0;
                that.freightForm = data.data;
                that.freightLoading = false;
              });
            },
            addStock(){
              var that = this;              
              that.$confirm('确定全部补货, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                var postData = {id:"{{$id}}"};
                axios.put("{{ route('admin.machines.freightAddStock') }}",postData).
                then(res =>{
                  var data = res.data;

                  that.getFreight(1);
                  that.$message({
                    type: 'success',
                    message: '补货成功!'
                  });
                });                
              }).catch(() => {
                that.$message({
                  type: 'info',
                  message: '已取消补货'
                });          
              });
            },
            getMchines(){
              var that = this;
              that.dialogFormVisible = true;
              //获取设备模板
              axios.get("{{ route('admin.machines.lists') }}", {
                params:{
                  merchant_id:that.merchantForm.merchant_id,
                }
              }).then(res => {
                  that.machineLists = res.data.data;
              }); 
            },
            copyFreight(){
              var that = this;
              if(that.machineForm.machine_id != ''){
                var postData = {
                  machine_id:"{{ $id }}",
                  copy_id: that.machineForm.machine_id,
                }
                that.$confirm('确定复制该货道, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.put("{{ route('admin.machines.freightUpdate') }}",postData).
                  then(res =>{
                    var data = res.data;
                    if(data.msg = 'success'){
                      that.dialogFormVisible = false;
    
                      that.getFreight(1);
                      that.$message({
                        type: 'success',
                        message: '复制成功!'
                      });
                    }                  
                  });                
                }).catch(() => {
                  that.dialogFormVisible = false;
                  that.$message({
                    type: 'info',
                    message: '已取消复制'
                  });          
                });
              } 
            },
            VisibleCopyFreight(){
              var that = this;
              that.machineForm.machine_id = '';
              that.dialogFormVisible = false;
            },
            VisibleCopyFreightDemo(){
              var that = this;
              that.machineForm.machine_id = '';
              that.dialogFreightFormVisible = false;
            },
            freightQrcode(){
              var that = this;
              axios.get("{{ route('admin.machines.freightQrcode') }}",{
                params:{
                   machine_id: "{{$id}}"
                }
              }).then(res => {
                location.href = res.data.data;
              });
            },
            changeFreight(){
              var that = this;
              that.freightWayForm = {
                  start:'',
                  end:'',
                  singles:'',
                  capacity: '',
                  type: '1',
                  state: '0',
                  stock:'1',
                  stock_warning:'1',
                  price:'0.00',
                  machine_id: '{{ $id }}',
                  edit_capacity: false,
                  edit_type: false,
                  edit_state: false,
                  edit_stock: false,
                  edit_stock_warning:false,
                  edit_price: false,
                }
              that.freightDialogVisible = true;
            },
            changeFreightSubmit(){
              var that = this;
              if(that.freightWayForm.start != '' && that.freightWayForm.end != ''){
                if(Number(that.freightWayForm.start) >= Number(that.freightWayForm.end)){
                  that.$message.error('开始货道必须小于结束货道');
                  return;
                }                    
              }else if( that.freightWayForm.singles != ''){
                
              }else{
                that.$message.error('请填写货道号');
                return ;
              }
              axios.post("{{ route('admin.machines.freightEdit')}}", that.freightWayForm)
              .then(res => {
                that.freightDialogVisible = false;
                that.resetForm('freightWayForm');
                var data = res.data;
                that.getFreight(1);
                if(data.msg.fail != 0){
                  that.$message.error('失败个数' + data.msg.fail + '失败货道号:' + data.msg.failNo);
                  that.freightWayForm.singles = data.msg.failNo;
                }
              });
            },
            handleClose(){
              this.resetForm('freightWayForm');
              this.freightDialogVisible = false;
            },
            handleGoodsCurrentChange(page){
              this.goods_current_page = page;
              this.getGoodsData()
            },
            bindGoods(row){
              var that = this;
              if(that.permissions.bindGoods){
                that.bindFormData.freight_id = row.id;
                that.getGoodsData();
              }else{
                that.$message.error('没有修改商品的权限');
              }

            },
            submitBindGoods(index, row){
              var that = this;
              that.bindFormData.goods_id = row.id;
              axios.put("{{ route('admin.machines.freightBindGoods') }}",that.bindFormData).
              then(res => {
                if(res.data.msg == 'success'){
                  that.$message.success('绑定成功');
                  that.dialogGoodsVisible = false;

                  that.getFreight(1);
                }
              });
            },
            getGoodsData(){ 
              var that = this;
              if(that.search_goods_name == ''){
                var param = {
                  params:{
                    machine_id: "{{$id}}",
                    page:that.goods_current_page
                  }
                }
              }else{
                var param = {
                  params:{
                    machine_id: "{{$id}}",
                    goods_name:that.search_goods_name,
                    page:that.goods_current_page
                  }
                }
              }        
              axios.get("{{ route('admin.machines.goodsLists') }}",
                param).then(res => {
                var data = res.data.data;
                that.goodsData = data.data;
                that.goods_total = data.total;
                that.goods_page_size = data.per_page;
                that.dialogGoodsVisible = true;
              }); 
            },
            handleOpen: function(index, row){  
              this.$confirm('此操作为出货, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.get("{{ route('admin.machines.freightOpen') }}",{
                  params: {
                    freight_id:row.id
                  }
                }).then(res => {
                  if(res.data.code == 200){
                    this.$message({
                      message: '开锁指令发送成功',
                      type: 'success'
                    });
                  }else{
                    this.$message({
                      message: res.data.msg,
                      type: 'error'
                    });
                  }
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消指令'
                });          
              });
            },
            freightUpdateData(row){
              var that = this;
              axios.post("{{ route('admin.machines.freightUpdateData') }}",row)
              .then(res => {
                var data = res.data;
              });
            },
            outAll(){
              this.$confirm('此操作为一键出货, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.get("{{ route('admin.machines.outAll') }}",{
                  params:{
                    machine_id:"{{$id}}"
                  }
                }).then(res => {
                  if(res.data.code == 200){
                    this.$message({
                      message: '开锁指令发送成功',
                      type: 'success'
                    });
                  }else{
                    this.$message({
                      message: res.data.msg,
                      type: 'error'
                    });
                  }
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消指令'
                });          
              });
            },
            searchGoods(){
              this.getGoodsData();
            },
            resetForm(formName) {
              this.$refs[formName].resetFields();
            },
            deleteOrder(){
              this.$confirm('此操作为一键删除设备订单, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                axios.get("{{ route('admin.machines.deleteOrder') }}",{
                  params:{
                    machine_id:"{{$id}}"
                  }
                }).then(res => {
                  if(res.data.code == 200){
                    this.$message({
                      message: '删除成功',
                      type: 'success'
                    });
                  }else{
                    this.$message({
                      message: '删除失败',
                      type: 'error'
                    });
                  }
                });
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消指令'
                });          
              });    
            },
            copyDemoFreight(){
              var that = this;
              that.dialogFreightFormVisible = true;
              axios.get("{{ route('admin.freightWayDemo.lists') }}")
              .then(res => {
                that.freightList = res.data.data;
              });
            },
            copyFreightDemo(){
              var that = this;
              if(that.freightForms.freight_id != ''){
                var postData = {
                  machine_id:"{{ $id }}",
                  freight_demo_id: that.freightForms.freight_id,
                }
                that.$confirm('确定复制该模版货道, 是否继续?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  axios.put("{{ route('admin.machines.freightDemoUpdate') }}",postData).
                  then(res =>{
                    var data = res.data;
                    if(data.msg = 'success'){
                      that.dialogFreightFormVisible = false;
    
                      that.getFreight(1);
                      that.$message({
                        type: 'success',
                        message: '复制成功!'
                      });
                    }                  
                  });                
                }).catch(() => {
                  that.dialogFreightFormVisible = false;
                  that.$message({
                    type: 'info',
                    message: '已取消复制'
                  });          
                });
              } 
            }
          }
        });
</script>
@stop